*{
	padding: 0;
	margin: 0;
}
@keyframes text-in-white {
	to {
		color: white;
	}
}
@keyframes slide-in-out {
	50% {
		transform: scaleX(1);
		transform-origin: left;
	}
	50.1% {
		transform-origin: right;
	}
	100% {
		transform: scaleX(0);
		transform-origin: right;
	}
}
.wrap {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(rgba(16,16,16,0.8),rgba(16,16,16,0.8)), url(https://hatsune-miku-yyy-blog-static.oss-cn-chengdu.aliyuncs.com/static/730e0cf3d7ca7bcbc0ac9cdab4096b63f724a874.jpg);
	background-size: cover;
}
.slide-bar {
	color: transparent;
	position: relative;
	animation: text-in-white 2s 1.6s forwards;
	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: skyblue;
		transform: scaleX(0);
		transform-origin: left;
		animation: slide-in-out 2s cubic-bezier(0.75, 0, 0, 1) forwards;
	}
}
.title {
	font-size: 3em;
	font-weight: 600;
	margin: 1em 0;
}
.description {
	font-size: 1em;
	animation-delay: 4s;
	&::before {
		background-color: hotpink;
		animation-delay: 2s;
	}
}